<template>
    <div>
        <a href='/AddView'>新增</a><br>
        户型名称<input type="text" v-model="qag.name">
        户型结构
        <select v-model="qag.hunt">
            <option value="0">请选择</option>
            <option value="一层结构">一层结构</option>
            <option value="两层结构">两层结构</option>
            <option value="三层结构">三层结构</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <table>
            <thead>
                <tr>
                    <td>户型名称</td>
                    <td>户型结构</td>
                    <td>建筑面积</td>
                    <td>套内面积</td>
                    <td>图片</td>
                    <td>启禁用</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="m in data">
                    <td>{{ m. name}}</td>
                    <td>{{ m. hunt}}</td>
                    <td>{{ m. jian}}</td>
                    <td>{{ m. teao}}</td>
                    <td><img v-if="m.img" :src="'https://localhost:7095/'+m.img" alt="" style="width: 90px;height: 90px;"></td>
                    <td>{{ m. quent?"启用":"禁用"}}</td>
                    <td>
                        <a :href="'https://localhost:7095/'+m.img" target="_blank">查看</a>
                        <input type="button" value="逻辑删除" @click="Del(m.id)">
                        <input type="button" value="编辑" @click="Xin(m.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <input type="button" value="首页" @click="Fent(1)">
        <input type="button" value="上一页" @click="Fent(2)">
        <input type="button" value="下一页" @click="Fent(3)">
        <input type="button" value="尾页" @click="Fent(4)">
    </div>
</template>

<script setup lang="ts">
import { ref ,onMounted} from 'vue';
import axios from 'axios';
import { useRouter} from 'vue-router';

const rount=useRouter()

onMounted(() => {
    Show()
})

const Xin=(vid:any)=>{
    rount.push({path:'/XinView',query:{id:vid}});
}

const Del=(vid:any)=>{
    if(!confirm('确认逻辑删除吗?')){
        return;
    }
    axios.delete("https://localhost:7095/api/User/Delete",{params:{id:vid}}).then(res=>{
        if(res.data>0){
            alert('逻辑删除成功')
            Show()
        }
    })
}

const data=ref([{
    "id": 0,
    "name": "",
    "hunt": "",
    "jian": 0,
    "teao": 0,
    "img": "",
    "quent": true
}])

const Fent=(val:any)=>{
    if(val==1){
        qag.value.pardex=1;
        return;
    }
    if(val==2){
        if(qag.value.pardex>1){
            qag.value.pardex+=1;
            return;
        }
    }
    if(val==3){
        if(qag.value.pardex<page.value.pcount){
            qag.value.pardex-=1;
            return;
        }
    }
    if(val==4){
        qag.value.pardex=page.value.pcount;
        return;
    }
}

const qag=ref({
    pardex:1,
    parsize:3,
    name:"",
    hunt:"0"
})
    
const page=ref({
    count:0,
    pcount:0
})


const Show=()=>{
   axios.get("https://localhost:7095/api/User/Show",{params:qag.value}).then(res=>{
        data.value=res.data.data;
        page.value.count=res.data.count;
        page.value.pcount=Math.ceil(res.data.count/qag.value.parsize);
   })
}

</script>

<style scoped>

</style>

